import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter/material.dart';
import 'package:icooker/model/reommend_data.dart';
import 'package:cached_network_image/cached_network_image.dart';

/// 推荐列表
class RecommendList extends StatelessWidget {
  final List<VideoInfoData> videoList;

  const RecommendList(this.videoList, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return buildRecommendContent();
  }

  buildRecommendContent() {
    return Container(
      height: ScreenUtil().setHeight(200),
      width: double.infinity,
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          var videoInfo = videoList[index];
          return buildGestureDetector(index, videoInfo);
        },
        itemCount: videoList.length,
      ),
    );
  }

  Widget buildGestureDetector(int index, VideoInfoData videoInfo) {
    var imgUrl = videoInfo.video!.img!;
    print("imgUrl: $imgUrl");
    var vendorVideo = videoInfo.video!.vendorVideo;

    var ratio = 0.7;
    return Expanded(
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.0)),
        // height: ScreenUtil().setHeight(220),
        // width: ScreenUtil().setHeight(220) * ratio,
        padding: EdgeInsets.symmetric(horizontal: 4.0),
        child: AspectRatio(
          aspectRatio: 1 / 1,
          child: Stack(
            children: [
              _buildImage(imgUrl),
              Positioned(
                child: Text(
                  videoInfo.recommendTitle!,
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
                top: 10,
                left: 10,
              ),
              Positioned(
                child: Column(
                  children: [
                    Text(
                      videoInfo.title!,
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Row(
                      children: [
                        CircleAvatar(
                          backgroundImage:
                              NetworkImage(videoInfo.author!.avatarUrl!),
                        ),
                        SizedBox(
                          width: 5,
                        ),
                        Text(
                          videoInfo.author!.nickname!,
                          style: TextStyle(fontSize: 16, color: Colors.white),
                        )
                      ],
                    )
                  ],
                ),
                bottom: 10,
                left: 10,
              ),
              Align(
                alignment: Alignment.center,
                child: _buildPlayButton(vendorVideo!),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildImage(String imgUrl) {
    return AspectRatio(
      aspectRatio: 1,
      child: Container(
        child: ColorFiltered(
          colorFilter: ColorFilter.mode(Color(0xFFEEEEEE), BlendMode.modulate),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: CachedNetworkImage(
              fit: BoxFit.cover,
              imageUrl: imgUrl,
            ),
          ),
        ),
      ),
    );
  }

  _buildPlayButton(String vendorVideo) {
    return vendorVideo == null
        ? Container()
        : GestureDetector(
            onTap: () {},
            child: Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30.0),
                  color: Colors.black54.withOpacity(0.4)),
              child: Icon(
                Icons.play_arrow,
                size: 42,
                color: Colors.white,
              ),
            ),
          );
  }
}
